import { PageContainer } from '@ant-design/pro-layout';
import TbaleExplainMap from '@/components/TipsMap';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown, ProCard } from '@ant-design/pro-components';
import { Button, Dropdown, Menu, Space, Tag, message, Badge } from 'antd';
import React, { useRef, useState } from 'react';
import request from 'umi-request';
import { Link, history } from 'umi';
import {
  ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';

import Copy from './component/Copy';
import Done from './component/Done';
import NeedHandle from './component/NeedHandle';
import Launch from './component/Launch';

export default () => {
  const [tabKey, setTabKey] = useState('NeedHandle');

  const onTabChange = (value: any) => {
    console.log(value);
    setTabKey(value);
  };
  return (
    <PageContainer
      tabList={[
        {
          tab: (
            <Badge count={5} size="small">
              <span style={{ fontSize: 16 }}>我的待办</span>
            </Badge>
          ),
          key: 'NeedHandle',
        },
        {
          tab: (
            <Badge count={5} size="small">
              <span style={{ fontSize: 16 }}>我的已办</span>
            </Badge>
          ),
          key: 'Done',
        },
        {
          tab: (
            <Badge count={5} size="small">
              <span style={{ fontSize: 16 }}>我的抄送</span>
            </Badge>
          ),
          key: 'Copy',
        },
        {
          tab: <span style={{ fontSize: 16 }}>发起流程</span>,
          key: 'Launch',
        },
      ]}
      onTabChange={onTabChange}
    >
      {tabKey === 'NeedHandle' ? <NeedHandle /> : null}
      {tabKey === 'Done' ? <Done /> : null}
      {tabKey === 'Copy' ? <Copy /> : null}
      {tabKey === 'Launch' ? <Launch /> : null}
    </PageContainer>
  );
};
